<template>
  <div>
    <header-tilte :title="title"></header-tilte>
    <loading v-if="isShowLoading"></loading>
    <div class="flex_center" v-if="!isShowLoading">
      <div class="bodyContent">
        <div>
          <mu-tabs :value.sync="active2" color="#fff" indicator-color="#1296db" full-width>
            <mu-tab>我的水票</mu-tab>
            <mu-tab>水票明细</mu-tab>
          </mu-tabs>
          <div class="demo-text " >
            <mu-container ref="container" class="demo-loadmore-content ticket_content" v-bind:style="{height:conH}" >
              <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load" class="" v-if="active2 === 0">
                <mu-list >

                  <template v-for="bill in billList" >
                    <div style="padding:0.2rem 0.5rem" >
                      <div class="flex flex_between bill_obj white_bac">
                        <div class="flex" style="width: 73%">
                          <img :src="bill.goods_img">
                          <div class="flex flex_column flex_around">
                            <p class="text_left">{{bill.goods_name}}</p>
                            <p class="text_left font-weight ">
                              余票：{{bill.rest_num}}张
                            </p>
                          </div>
                        </div>
                        <router-link :to="'/qds/bookingWater'" class="flex flex_column flex_between">
                          <!--<div >-->
                            <span></span>
                            <p style=""><span class="font-weight">一键订水</span> <i class="fa fa-chevron-right"></i></p>
                          <!--</div>-->
                        </router-link>
                      </div>
                    </div>
                  </template>
                  <template v-if="billList == undefined || billList == null || billList == '' || billList.length <= 0">
                    <p style="padding: 2rem">暂无数据</p>
                  </template>
                </mu-list>
              </mu-load-more>
              <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load" class="" v-if="active2 === 1">
                <mu-list >
                  <template v-for="detail in billDetailList">
                    <div style="padding:0.2rem 0.5rem" >
                      <div class="flex flex_between bill_obj white_bac">
                        <div class="flex flex_column flex_between">
                          <p style="color: #1296db">{{detail.description}}</p>
                          <p>{{detail.created_at}}</p>
                        </div>
                        <div class="flex flex_column flex_between">
                          <p style="color: #f01414" v-if="detail.use_type == 0">+{{detail.buy_num}}</p>
                          <p style="color: rgb(255, 179, 17)" v-if="detail.use_type == 0">赠送 <span>+{{detail.gift_num}}</span></p>
                          <p style="color: #f01414" v-if="detail.use_type == 1">-{{detail.num}}</p>
                          <p>{{detail.goods_name}}</p>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-if="billDetailList == undefined || billDetailList == null || billDetailList == '' || billDetailList.length <= 0">
                    <p style="padding: 2rem">暂无数据</p>
                  </template>
                </mu-list>
              </mu-load-more>
            </mu-container>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import HeaderTilte from "../../components/headerTilte";
    import Loading from "../../components/loading";

    export default {
      data(){
        return{
          title:'账户中心-水票',
          isShowLadding:true,
          active2:0,
          num: 10,
          refreshing: false,
          loading: false,
          text: 'List',
          billList:[],
          billDetailList:[],
          page:1,
          isShowLoading:true
        }
      },
      mounted(){
        this.checkLogin();
        this.$nextTick(function () {
          var allH = document.documentElement.clientHeight;
          var headerH = $('.header').height();
          /*var h1 = $('.mu-tabs').height();*/
          var h = allH -  headerH - 68;
          this.conH = h + 'px';
        })

        this.initBillList();
        this.initBillDetailList(1);
      },
      methods:{

        initBillList(){
          this.yesS.memberBillList(
            this.$comParams()
          ).then(res => {

            this.billList = res.data.bill_list;

            this.isShowLoading = false;
          })
        },
        initBillDetailList(page){
          this.yesS.memberBillRecord(
            this.$comParams()
          ).then(res => {

            var objs = res.data.record_list.data;
            if(page == 1){
              this.billDetailList = objs;
            }else{
              if(!this.isEmpty(objs) && objs.length > 0){
                for (var i=0;i<objs.length;i++){
                  this.billDetailList.push(objs[i]);
                }
              }
            }
            this.page = page+1;
          })
        },
        refresh () {
          this.refreshing = true;
          this.$refs.container.scrollTop = 0;
          setTimeout(() => {
            this.refreshing = false;
            if(this.active2 == 1){
              this.initBillDetailList(1);
            }

          }, 2000)
        },
        load () {
          this.loading = true;
          if(this.active2 == 1){
            this.initBillDetailList(this.page)
          }
          setTimeout(() => {
            this.loading = false;

          }, 2000)
        }
      },
      watch:{

      },
      components: {
        Loading,
        HeaderTilte},
      name: "ticket"
    }
</script>

<style scoped>
  .mu-tabs{
    color: #2c3e50;
  }
  .mu-tab-active{
    color: #1296db;
  }
  .mu-item{
    height: 100px;
  }
  .bill_obj{
    border-radius: 10px;
    padding: 0.6rem;
  }

  .bill_obj img{
    width: 5rem;
    height: 5rem;
    margin-right: 0.5rem;
  }

  .ticket_content{
    overflow: hidden;
    overflow-y: auto;
  }

  .bill_obj p{
    padding: 0.2rem 0;
  }
</style>
